<template>
  <div class="file-manager">
    <div class="sidebar">
      <directory-tree @directory-selected="handleDirectorySelected"></directory-tree>
    </div>
    <div class="content">
      <file-list :current-directory="currentDirectory"></file-list>
    </div>
  </div>
</template>

<script>
import DirectoryTree from "@/components/documents/DirectoryTree.vue";
import FileList from "@/components/documents/FileList.vue";

export default {
  components: {
    DirectoryTree,
    FileList
  },
  data() {
    return {
      currentDirectory: null
    };
  },
  methods: {
    handleDirectorySelected(directory) {
      this.currentDirectory = directory;
    }
  }
};
</script>

<style scoped>
.file-manager {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 240px;
  border-right: 1px solid #ebebeb;
  overflow-y: auto;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
</style>